<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="register/css/register.css">
    <link rel="stylesheet" href="register/css/base.css">
    <link rel="stylesheet" href="register/css/reset.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="register/js/jquery.min.js"></script>
   
    <script src="register/js/validate.js"></script>
    <script src="register/js/loading.js"></script><link rel="shortcut icon" href="./icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="register/css/loading.css">
    <link rel="stylesheet" href="layui/css/layui.css">
  
    <style>

    </style>
</head>

<body>
    <!-- 囊括所有 -->
    <div class="login">
        <!-- 左边的背景 -->
        <div class="lg-bk"></div>
        <!-- 囊括所有,内容区 -->
        <div class="login-content">
            <!-- 头部导航 -->
            <div class="header">
                <div class="hl">
                    <div class="img"></div>
                    <span>小米账号</span>
                </div>
                <div class="hr">
                    <div class="min-nav">
                        <span> <a href="">用户协议</a></span>
                        <span> <a href="">隐私政策</a></span>
                        <span> <a href="">帮助中心</a></span>
                        <span> <a href="">中文(简体)</a></span>
                    </div>
                </div>
            </div>
            <!-- 下方登录部分包裹 -->
            <div class="login-card-wrap">
                <!--登录部分 -->
                <div class="login-card">
                    <!-- 登录注册选择 -->
                    <div class="login-choice">
                        <a href="./login2.html">登录</a>
                        <a href="">注册</a>
                    </div>
                    <!-- 账号密码输入框 -->
                    <div class="mi-form layui-form" lay-filter="registerForm">
                        <p>
                            <input type="text" placeholder="账号" class="input-id" required lay-verify="required|username" name="username">
                        </p>
                        <p>
                            <input type="password" placeholder="密码" required class="input-psd" lay-verify="required|password" name="password">
                        </p>
                        <p>
                            <input type="password" placeholder="确认密码" required  class="input-cpsd" lay-verify="required|password|confirm" name="confirmpassword">
                        </p>
                        <p>
                            <input type="text" placeholder="手机号" required  class="eml" lay-verify="required|phone" >
                        </p>
                        <p>
                            <input type="button" value="注册" class="input-sub" lay-submit lay-filter="registerBtn">
                        </p>
                    </div>
                    <div class="help">
                        <p>
                            <a href="">收不到验证码？</a>
                        </p>
                        <div class="accpet">
                            <form action="">
                                <input type="checkbox" checked>
                                已阅并同意小米账户
                                <a href="">用户协议</a>
                                和
                                <a href="">隐私政策</a>
                            </form>
                        </div>
                    </div>
                    <div class="login-ortherway">
                        <p class="title">
                            其他方式登录
                        </p>
                        <div class="login-list">
                            <a href="" class="iconfont icon-qq"></a>
                            <a href="" class="iconfont icon-weibo1"></a>
                            <a href="" class="iconfont icon-zhifubao"></a>
                            <a href="" class="iconfont icon-weixin"></a>
                        </div>
                    </div>
                </div>
            </div>
            <footer >
                <p class="mi-copy">
                    小米公司版权所有-京ICP备10046444-
                    <a href="">
                        京公网安备11010802020134号
                    </a>
                    -京ICP证110507号
                </p>
            </footer>
        </div>
    </div>
<!--    <script src="register/js/register.js"></script>-->
    <script src="layui/layui.all.js"></script>
<script>
    const $=layui.$;
    const form=layui.form;
    const layer=layui.layer;
    const reg=/^\w{6,16}$/;
    form.verify({
        username:function(val,item){
            console.log("--------------1");
            //验证格式是否正确
            if(!reg.test(val)){
                return "用户名必须是6-16为字母数字_";
            }
            //验证不能重复
            let isOK=true;
            $.ajax({
                url:'user/getuserbyusername',
                data:{username:val},
                async:false,
                success:function(result){

                    if(result.data){
                        console.log(result);
                        isOK=false;
                    }
                }
            });
            if(!isOK){
               return "账号已经被注册,请重新编辑";
            }
        },
        password:function(val,item){
            //验证格式是否正确
            if(!reg.test(val)){
                return "密码必须是6-16为字母数字_";
            }
        },
        confirm:function(val,item){
            //密码和确认密码是否一样
            let pass=$("[name='password']").val();
            if(val!=pass){
              return "密码和确认密码必须一样";
            }
        }
    });

    form.on("submit(registerBtn)",function(obj){
        //表单验证成功后执行
        let formdata=obj.field;//表单中的数据
        let btn=obj.elem;//提交按钮
        $(btn).prop("disabled",true);//设置按钮不可用
        $.ajax({
            url:"user/register",
            data:formdata,
            success:function(result){
                let code=result.code;
                let msg=result.msg;
                if(code!=200){
                    layer.msg(msg,{icon:2});
                    $(btn).prop("disabled",false);
                }else{
                    layer.msg(msg,{icon:1,time:3000})
                    setTimeout(function(){
                        location.href="shopping/login";
                    },3000);
                }
            }
        });

        //取消表自行提交功能
        return false;
    });
</script>
</body>

</html>